import 'dart:math' as math;

import 'package:flutter/material.dart';

class ScalePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("animated_widget"),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: ScaleAndRotateViewWrapper(),
            ),
            Expanded(
              flex: 1,
              child: ScaleAndRotateView2_(),
            )
          ],
        ));
  }
}

class ScaleAndRotateViewWrapper extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ScaleAndRotateWrapperState();
  }
}

class _ScaleAndRotateWrapperState extends State<ScaleAndRotateViewWrapper>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    super.initState();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.blueGrey,
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                switch (_controller?.status) {
                  case AnimationStatus.completed:
                    _controller?.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    _controller?.forward();
                    break;
                  default:
                    break;
                }
              },
              child: Text("开始动画"),
            ),
            _ScaleAndRotateView(_controller)
          ],
        ));
  }
}

/// 三种方式实现调整rotate动画的中心点位置，直接使用[Transform]默认是左上角，[RotationTransition]通过[Alignment.center]已经设定了默认为中心点
/// [Transform.origin]和[Transform.alignment]两个属性设置以及通过[Matrix4]进行调整
class _ScaleAndRotateView extends AnimatedWidget {
  final AnimationController _controller;
  final FadeTransition _fadeTransition;

  _ScaleAndRotateView(this._controller)
      : this._fadeTransition = FadeTransition(
          opacity: _controller,
          child: Image.asset(
            "assets/birds_by_pond.jpg",
            width: 157,
            height: 200,
          ),
        ),
        super(listenable: _controller);

  @override
  Widget build(BuildContext context) {
    var value = _controller.value;
    var matrix4 = Matrix4.identity();
    var scale = value > 0 ? value : -value;
    var item = _fadeTransition;
    print(
        "scale:$scale rotate:${scale * math.pi * 2.0} --->_fadeTransition:$item}");
//    Vector3 vector3 = Vector3(78.0, 100.0, 0.0);
    matrix4 = matrix4
      ..rotateZ(scale * math.pi * 2.0)
      ..scale(scale, scale, 1.0);
    Offset offset = Offset(78.0, 100.0);

    /// TODO 类似与android中的preTranslate/postTranslate的写法
    var finalResult = Matrix4.identity()
      ..translate(offset.dx, offset.dy)
      ..multiply(matrix4)
      ..translate(-offset.dx, -offset.dy);

    return Transform(
      transform: finalResult,
//      alignment: Alignment.center,
//      origin: offset,
      child: item,
    );
  }
}

/// 通过[ScaleTransition]与[RotationTransition]两个控件组合实现
class ScaleAndRotateView2_ extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ScaleAndRotateView2_State();
  }
}

class _ScaleAndRotateView2_State extends State<ScaleAndRotateView2_>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    super.initState();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        RaisedButton(
          onPressed: () {
            handleAnimation(_controller);
          },
          child: const Text("开始动画"),
        ),
        ScaleTransition(
          scale: _controller,
          child: RotationTransition(
            turns: _controller,
            child: Image.asset("assets/birds_by_pond.jpg"),
          ),
        )
      ],
    ));
  }
}

void handleAnimation(AnimationController controller) {
  switch (controller?.status) {
    case AnimationStatus.dismissed:
      controller?.forward();
      break;
    case AnimationStatus.completed:
      controller?.reverse();
      break;
    default:
      break;
  }
}
